import React, { Component } from "react";
import { observable, action, autorun } from 'mobx';

console.log('mobx test!');

class Store {
  @observable
  state = {
    time: new Date().toLocaleTimeString()
  }
  
  @action
  resetTime = () => {
    this.state.time = new Date().toLocaleTimeString();
  }

  // xxx = autorun(() => {
  //   console.log(this.state.time);
  // })
}

let store = new Store();

autorun(() => {
  console.log(store.state.time);
})

export default class MobxButton extends Component {
  render() {
    return (
      <div>
        <h6>
          <p>使用 @observable 修饰 Store 中的属性 state，通过 @action 修改数据 autorun 来相应数据变化</p>
          <p>由于未对组件使用 @observer 进行修饰，修改数据的时候不会引起重新渲染</p>
        </h6>
        <button onClick={() => store.resetTime()}>Observable Button</button>
        <p>{store.state.time}</p>
      </div>
    )
  }
}